import { Button, Table, Modal, Select} from "antd";
import type { TableColumnsType , PaginationProps} from "antd";
import { PageContainer  } from "@ant-design/pro-components";
import { useEffect, useState} from "react";

const options = [
  {label: "员工",value: 3},
  {label: "管理员",value: 2},
]

const Pertable = () => {
  const [ isShow, setIsShouw] = useState<boolean> (false);
  const [data, setData] = useState<Array<any>>([]);
  const [pagination , setPagination] = useState<PaginationProps>();
  const [info, setInfo] = useState<Info>();
  const columns: TableColumnsType<Info> = [
    {
    title: '姓名',
    dataIndex: "name",
    key:"name"
    },
    {
      title: '职务',
      dataIndex: "stuff",
      key:"stuff"
      },
      {
        title: '权限',
        dataIndex: "permisson",
        key:"permisson",
       render: (value) => {
        const result = options.filter(opt =>{
          if (opt.value === value) return opt.label;
          return "";
        })?.[0]?.label;
        return result;
       } 
      },
    {
      title: '操作',
      dataIndex: "action",
      key:"action",
      render: (value: any, record: any) => {
        return <Button onClick={() => handlerDrawer(record)}>配置</Button>
      }
    },
  ]
  const handlerDrawer = (record: any) => {
      const { id,value } =record;
      console.log(record);
      setInfo(record);
      setIsShouw(true);
  }
  const handlerTableChange = (page:PaginationProps) => {
     const { current , pageSize , pageSizeOptions, total } = page;
     if(current !== page.current) {
      // 发送请求
      setPagination({current,pageSize,total, pageSizeOptions});
     }
     return; 
     
  }
  const onModalClose = () => {
    setIsShouw(false);
    setInfo(undefined);
  }
  const onModalOK = () => {
    console.log(info);
    //发送请求
  }
  const handlerSelect = (value:number) => {
    console.log(value);
    setInfo({...info,permisson:value});
  }
  useEffect(() => {
    
  })
  return (
    <PageContainer>
        <Table
        columns={columns}
        dataSource={[{
          name: "ss",
          stuff: "管理员",
          permisson:2,
          id:1,
          key:1
        }]}
        pagination={pagination}
         onChange={handlerTableChange}
        />
        <Modal
          open={isShow}
          onCancel={onModalClose}
          onOk={onModalOK}
          title="设置管理权限"
        >
          
          <div style={{ display: "flex",justifyContent:"flex-start", alignItems: "center"}}>

          <div style={{ marginRight: "20px"}}>配置权限:</div>
          <Select style={{ width: "160px"}} options={options} placeholder="请选择要配置的权限" value={info?.permisson} onChange={handlerSelect} allowClear/>

          </div>
        </Modal>
    </PageContainer>
  )

}

export default Pertable;


type Info = {
  name?: string,
  stuff?: string,
  permisson?: number,
  id?:number,
  key?:number
}